<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/template-native.js"></script>
    <script id="tem" type="text/html">
        <!-- 将拿到的数据中 的 comments 变量进行遍历 -->
      <!-- 在每个li标签中添加一个自定义标签属性，记录自己的id -->
      <% for (var i=0 ; i < comments.length ; i++) { %>
            <li uid="<%= comments[i].id %>">
            <p class="floor">
                <%= comments[i].id %>楼<a href="javascript: ;" class="delete">删除</a>
            </p>
            <p class="author">层主：<span class="name">
                <%= comments[i].username %>
                </span></p>
            <p class="content">
                <%= comments[i].say %>
            </p>
            </li>
        <% } %>
    </script>
</head>

<body>
    <div class="main">
        <div class="post">
            <h2>新年快乐</h2>
            <p class="author">楼主：行痴</p>
            <p class="txt">新的一年，祝大家新年快乐，身体健康，升职加薪！</p>
        </div>
        <div class="reply">
            <h4>发表回复</h4>
            <p>用户名：<input type="text" class="user"></p>
            <textarea class="editor"></textarea>
            <input type="button" value="发表" class="btn">
        </div>
        <div class="cmts">
            <ul class="list">

            </ul>
        </div>
    </div>
    <script>
        const $ul_li = $(".cmts .list"); //获取添加评论模板的ul
        const $btn = $(".reply .btn"); //获取发表按钮id
        const $user_name = $(".reply .user"); //获取发表的用户名
        const $contents = $(".reply .editor"); //获取用户发表的评论内容
        const deleteData = ()=> {
            let $dele = $(".cmts .list .floor .delete");
            $dele.click(function() {
                // 要找到自己的祖先中的li 标签
                let $li = $(this).parents("li");
                // 找到 li 标签记录的在数据库中的 id
                var index = $li.attr("uid");
                // 发送请求到数据库，删除对应的数据
                $.ajax({
                    url: "http://localhost:5000/comments/" + index,
                    type: "DELETE"
                })
                // 从 DOM结构中删除对应的 li
                $li.remove();
            })
        }
        const addUserContet = ()=> {
            // 获取用户评论内容的函数
            $.get("http://localhost:5000/db",(data)=>{
                // console.log(data);
                $ul_li.html(template("tem",data));//把模板添ul内
                deleteData();
            });
        };
        addUserContet(); // 执行获取内容的函数
        // 渲染完毕后给发表按钮添加点击事件
        $btn.click(function(){
            let name = $user_name.val();
            let ly = $contents.val();
            $.post("http://localhost:5000/comments",{
                username: name,
                say: ly
            },(data)=>{
                // 根据返回成功上传内容,再次渲染到页面内
                $list.append(template("tem", { "comments": [data] }));
                deleteData();
            });
            // 清空内容
            $user_name.val("");
            $contents.val("");
            
        })

        
    </script>
</body>

</html>